<template>
	<view :data-theme="theme" class="container">
		<view class="header">
			<view class="card">
				<h2>添加{{this.titleName}}名称</h2>
				<u--form labelPosition="left" style="margin: 0 20rpx;padding: 20rpx;" :model="formModel" :rules="rules"
					ref="uForm">
					<u-form-item :label="`${titleName}名称`" prop="productDetail.name" labelWidth="80" ref="item1"
						:required="true">
						<u--input v-model="formModel.name" :placeholder="`请输入${titleName}名称`" disabledColor="#fff"
							border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>


		<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;z-index: 999;">
			<button class="bg_color" style="font-weight: bold;border-radius: 10px;padding: 20rpx;color: #fff;"
				:loading="loading" @click="addSpecifice">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		addSpecificeApi,
		addUnitListApi
	} from '@/api/merchant.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				formModel: {
					name: '',
				},

				addCancelData: [],
				rules: {
					'formModel.name': {
						type: 'string',
						required: true,
						message: '请填写规格名称',
						trigger: ['blur', 'change']
					},
				},
				loading: false,
				titleName: '规格',
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});

			if (options.type == 'unit') {
				uni.setNavigationBarTitle({
					title: '添加单位',
				});
				this.titleName = '单位'
			} else {
				uni.setNavigationBarTitle({
					title: '添加规格'
				});
				this.titleName = '规格'
			}
			// this.getDepotList();
			// this.getOperateCity();
		},
		methods: {
			addSpecifice() {
				if (this.titleName == '单位') {
					this.formModel.unitTypeName = this.formModel.name;
				} else {
					this.formModel.specificationsName = this.formModel.name;
				};
				delete this.formModel.name;
				this.loading = true;
				this.titleName == '规格' ? addSpecificeApi(this.formModel).then((res) => {
					this.backNavigate();
					this.loading = false;
				}).catch((err) => {
					console.log("err:", err);
					this.loading = false;
				}) : addUnitListApi(this.formModel).then((res) => {
					this.backNavigate();
					this.loading = false;
				}).catch((err) => {
					console.log("err:", err);
					this.loading = false;
				})
			},
			backNavigate() {
				uni.showToast({
					title: '提交成功',
					icon: 'success', // 提示图标，可选值：'success', 'loading', 'none'
					duration: 2000 // 持续时间，单位为毫秒
				});
				setTimeout(() => {
					const pages =
						getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
					const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
					uni.navigateBack({
						delta: 1,
					});
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	h1 {
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 20px;
	}

	h2 {
		font-weight: bold;
		margin: 20px;
		padding-top: 20rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx;
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.column {
		padding: 20rpx;
		display: flex;
		flex-flow: row;
		text-align: center;
		justify-content: space-between;

		.title {
			display: flex;
			// flex: 1;
			width: 150rpx;
		}

		.title-c {
			display: flex;
			flex: 1;
			justify-content: left;
			// padding-left: 20rpx;
		}
	}

	.businessStock {
		display: flex;
		flex-flow: row;
		padding: 20rpx;

		.top_right {
			margin-left: 20rpx;
		}
	}

	.top_right_weight {
		font-weight: bold;
	}


	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		text-align: center;
		justify-items: center;
	}
</style>